<div class="box">
    <div class="box-header">
        <h3 class="box-title">IP统计</h3>
    </div>
    <div class="box-body">
        <div id="ip_sort" style="height:300px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            let AppIpSort = echarts.init(document.getElementById('ip_sort'));

            let location_is_search = false;

            AppIpSort.on('click', function (params) {
                if (location_is_search) {
                    alert('尚有未完成的ip定位查询,请稍等~');
                    return;
                }
                location_is_search = true;
                $.post('/api/admin/home/ip-sort/location', {ip: params.name}).then((data) => {
                    if (data.address == null) return;
                    address = data.address.result
                    alert('需查询ip: ' + params.name + ' 的访问位置为 ' + Object.values(address).join('-'));
                    location_is_search = false;
                });
            });

            AppIpSort.showLoading();
            fetch('/api/admin/home/ip-sort', {method: "POST"}).then(res => res.json())
                .then(data => {
                    if (!data.data) return;

                    AppIpSort.hideLoading();
                    // 指定图表的配置项和数据
                    let option = {
                        title: {
                            subtext: '点击柱体即可查看ip所在地区',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: data.data.list,
                            axisLabel: {interval: 0, rotate: 90}
                        },
                        yAxis: {
                            type: 'value'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [{
                            data: data.data.values,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    AppIpSort.setOption(option);
                });
        </script>
    </div>
</div>
